/*
  学习目标：复用逻辑-renderProps

  
*/

import React, { useState } from 'react';

// 1. 本质上一个组件
// 2. 组件有一个props属性, 叫render
function LogMouse({ render }) {
  const [mouse, setMouse] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => {
    setMouse({ x: e.clientX, y: e.clientY });
  };
  // 3. render是一个函数, 函数返回一个jsx
  // 4. 组件内部, 封装逻辑, 传给render的参数
  const res = render({ mouse, handleMouseMove });
  return res;
}

export default function App() {
  return (
    <div>
      <LogMouse render={(xxx) => <Header {...xxx} />} />

      <LogMouse
        // 3. render是一个函数, 函数返回一个jsx
        render={(xxx) => <Main {...xxx} />}
      />
      <LogMouse
        // 3. render是一个函数, 函数返回一个jsx
        render={(xxx) => <Footer {...xxx} />}
      />
    </div>
  );
}

function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x:{mouse.x} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x:{mouse.x} -y:{mouse.y}
    </h1>
  );
}
